﻿import QtQuick 2.0

Rectangle {
    id: root
    width: 1000
    height: 1000
    color: Qt.rgba(0,0,0,0)
    //    border.color: "red"
    //    border.width: 2

    Connections{
        target: widget
        onSendKeyPress: {
            //            console.log("====",name)
            //            trailsNormal.enabled = true
        }
        onSendStop: {
            //            trailsNormal.enabled = false
        }
        onSend_mouse_position: {
            //            console.log("====",x,y)
            //            px = x
            //            py = y
        }
    }

    property int step: 0
    property int max: 8
    property bool isMouseEnable: true

    onStepChanged: {
        console.log("step ", step)
    }

    Page{
        num: 7
        itemFront: Rectangle{
            anchors.fill: parent
            color: "#f6f6f6"
            Image { source: "qrc:/images/image/3.jpg";
                anchors.centerIn: parent;
                //            anchors.fill: parent;
            }
        }
        itemBack: Rectangle {
            color: "white"
            anchors.fill: parent;
        }
    }

    Page{
        num: 6
        itemFront: Rectangle{
            anchors.fill: parent
            color: "white"
            AnimatedImage {
                source: "qrc:/images/image/13.gif";
                anchors.centerIn: parent;
                scale: 2
                //                anchors.fill: parent;
            }
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "white"
            AnimatedImage {
                source: "qrc:/images/image/1.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Page{
        num: 5
        itemFront: Rectangle{
            anchors.fill: parent
            color: "white"
            AnimatedImage {
                source: "qrc:/images/image/12.gif";
                anchors.centerIn: parent;
                //                anchors.fill: parent;
            }
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "#f2eceb"
            AnimatedImage {
                source: "qrc:/images/image/10.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Page{
        num: 4
        itemFront: Rectangle{
            anchors.fill: parent
            color: "#ebebeb"
            AnimatedImage {
                source: "qrc:/images/image/2.gif";
                anchors.centerIn: parent;
                //                anchors.fill: parent;
            }
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "#fcf0e4"
            AnimatedImage {
                source: "qrc:/images/image/9.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Page{
        num: 3
        itemFront: Rectangle{
            anchors.fill: parent
            color: "white"
            AnimatedImage {
                source: "qrc:/images/image/8.gif";
                anchors.centerIn: parent;
                //                anchors.fill: parent;
            }
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "#fcf0e4"
            AnimatedImage {
                source: "qrc:/images/image/4.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Page{
        num: 2
        itemFront: Rectangle{
            anchors.fill: parent
            color: "white"
            AnimatedImage {
                source: "qrc:/images/image/7.gif";
                anchors.centerIn: parent;
                //                anchors.fill: parent;
            }
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "#fcf0e4"
            AnimatedImage {
                source: "qrc:/images/image/5.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Page{
        num: 1
        itemFront: Image {
            source: "qrc:/images/image/11.jpg";
            anchors.centerIn: parent;
            anchors.fill: parent;
        }
        itemBack: Rectangle{
            anchors.fill: parent
            color: "#fcf0e4"
            AnimatedImage {
                source: "qrc:/images/image/6.gif";
                anchors.centerIn: parent;
            }
        }
    }

    Text{
        anchors.horizontalCenter: parent.horizontalCenter
        y: 60
        font.pixelSize: 100
        text: (step+1) + "/" + max
        color: "white"
    }

}
